<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建房间</title>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <link href="css/createRoom.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="maindiv">
      <div class="contentdiv cleanBox">
        <div class="RoomName">
          <i></i>
          <input id="roomInfo" type="text" placeholder="请输入房间标题" />
          <span>房间标题</span>
        </div>
        <div class="isSubscrribe">
          <i></i>
          <label
            class="isSubscrribe_label isChoose"
            for="isSubTrue"
            onclick="changeTab(this)"
            >可观战</label
          >
          <label
            class="isSubscrribe_label"
            for="isSubFalse"
            onclick="changeTab(this)"
            >不可观战</label
          >
          <span>房间是否可观战</span>
        </div>
        <div class="isPassword">
          <i></i>
          <label
            onclick="changePassTab(this)"
            class="isPassword_label isChoose"
            for="isPasTrue"
            >公开</label
          >
          <label
            onclick="changePassTab(this)"
            class="isPassword_label"
            for="isPasFalse"
            >私有</label
          >
          <span>房间是否设置密码</span>
        </div>
        <div id="isPassworddiv"></div>
        <div class="buttondiv">
          <a onclick="createRoom()">创建</a>
        </div>
      </div>
      <input
        id="isSubTrue"
        type="radio"
        name="isSub"
        value="0"
        checked
        style="display: none"
      />
      <input
        id="isSubFalse"
        type="radio"
        name="isSub"
        value="1"
        style="display: none"
      />
      <input
        id="isPasTrue"
        type="radio"
        name="isPas"
        value="0"
        style="display: none"
      />
      <input
        id="isPasFalse"
        type="radio"
        name="isPas"
        value="1"
        style="display: none"
      />
    </div>
  </body>
  <script>
    $(function () {
      var nickName = localStorage.getItem("nickname");
      $(window.parent)[0].setiframeHight($("body").height());
      $("#roomInfo").val(nickName + "的房间");
    });

    var isSub = 0;
    function changeTab(btn) {
      if (isSub == 0) {
        isSub = 1;
      } else {
        isSub = 0;
      }
      $(btn).parent().find("label").removeClass("isChoose");
      $(btn).addClass("isChoose");
    }

    var isApped = 0;
    function changePassTab(btn) {
      if (isApped == 1) {
        $("#isPassworddiv").empty();
        isApped = 0;
      } else if (isApped == 0) {
        $("#isPassworddiv").append(
          '<div class="PasswordInput"><i></i><input id="password" type="text" placeholder="请输入密码" /><span>房间密码</span></div>'
        );
        isApped = 1;
      }
      $(btn).parent().find("label").removeClass("isChoose");
      $(btn).addClass("isChoose");
    }

    function createRoom() {
      var roomName = $("#roomInfo").val();
      if (roomName.trim() == "" || roomName == null) {
        alert("房间名不能为空");
      }
      if (isApped == 0) {
        var password = "";
      } else {
        var password = $("#password").val();
      }
      $(window.parent)[0].createRoom(roomName, isSub, isApped, password);
    }

    //  <div class="PasswordInput">
    //   <i></i>
    //       <input id="password" type="text" placeholder="请输入密码" />
    //       <span>房间密码</span>
    //   </div>
  </script>
</html>
